<script setup lang="js">

import {computed, defineProps, onBeforeMount, onMounted, ref, watch} from "vue";
import {spell_store, staticAssertsStore} from "@/renderer/main-window/stores/storeAsserts.js";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";

const {spellId} = defineProps({
  "spellId": {
    type: Number
  },
  "size": {
    default: "small"
  }
})


const src = computed(() => {

  const uri = staticAssertsStore().getAssertSync({
    "key": spell_store,
    "id": spellId
  })?.iconPath
  if(uri===undefined){
    return ""
  }
  return `${storeSystemCertificateInfo().getImgProxyPrefix()}${uri}`
})



</script>

<template>
  <el-avatar :src="src" :size="size"/>
</template>

<style scoped>

</style>